<template>
  <div id="q0">
    <div class="top1">
      <router-link :to="{ name: 'selcity' }"
        ><div class="position">{{ city }}<icon name="arrow-down" /></div
      ></router-link>
      <div class="search1">
        <input type="search" v-model="searchvalue" />
        <icon @click="search" name="search" class="ss">搜索</icon>
      </div>
      <div class="more1" @click="showmore = !showmore">
        <icon name="more-o" />
      </div>
      <div class="saoyisao" v-show="showmore">
        <router-link :to="{ name: 'News' }">
          <p><icon name="comment-o"></icon>消　息</p>
        </router-link>
        <p><icon name="scan"></icon>扫一扫</p>
      </div>
    </div>
    <swiper
      id="swiperppp"
      :slidesPerView="1"
      :spaceBetween="30"
      :loop="true"
      :centeredSlides="true"
      :pagination="{
        clickable: true
      }"
      :autoplay="{
        delay: 4000,
        disableOnInteraction: false
      }"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide id="swiperdiv"
        ><img
          id="swiperimg"
          src="../images/016b355d22b1baa80121376392405c.jpg@1280w_1l_2o_100sh.jpg"
          alt=""
      /></swiper-slide>
      <swiper-slide id="swiperdiv"
        ><img id="swiperimg" src="../images/20146050513381470538601.jpg" alt=""
      /></swiper-slide>
      <swiper-slide id="swiperdiv"
        ><img id="swiperimg" src="../images/自助餐.png" alt=""
      /></swiper-slide>
    </swiper>
    <notice-bar
      left-icon="volume-o"
      text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
      scrollable
    />

    <grid :column-num="4">
      <grid-item
        :icon="dalImg(item.coverImage)"
        :text="item.name"
        v-for="item in sort"
        :key="item.id"
        :to="{ name: 'Tdetail', query: { tid: item.id, name: item.name } }"
      />
    </grid>
    <div class="huodong">
      <div class="q1">
        <img src="../images/优惠券.png" alt="" />
      </div>
      <div class="q2">
        <img src="../images/1元秒杀.png" alt="" />
        <img src="../images/特价抢购.png" alt="" />
      </div>
    </div>

    <!-- 11111 -->
    <tabs id="tabs1" v-model:active="active" swipeable swipe-threshold="5">
      <tab
        id="tab2"
        v-for="item in sort"
        :key="item.id"
        :title="'&nbsp; &nbsp; &nbsp; ' + item.name + ' &nbsp; &nbsp; '"
        :to="{ name: 'Home', query: { tid: item.id } }"
      >
      </tab>
    </tabs>
    <!-- 222222 -->
    <List
      :loading="loading"
      :finished="finished"
      @load="loadData"
      finished-text="哥哥不要再看了啦,人家也是有底线的哦！"
    >
      <div v-masonry="" transition-duration="0.3s" item-selector=".item">
        <div v-masonry-tile class="item" v-for="item in products">
          <router-link :to="{ name: 'DETAIL', query: { tid: item.id } }"
            ><img :src="item.imgs" alt=""
          /></router-link>
          <p>{{ item.name }}</p>
          <div class="message">
            <div class="left"><span>用户图片</span><span>这是用户名</span></div>
            <div class="right">
              <icon name="good-job-o">{{ 56 }}</icon>
            </div>
          </div>
        </div>
      </div>
    </List>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import {
  Grid,
  GridItem,
  Tab,
  Tabs,
  Card,
  Toast,
  List,
  Icon,
  NoticeBar,
  Popover
} from 'vant'
import { Swiper, SwiperSlide } from 'swiper/vue' // swiper所需组件
// 这是分页器和对应方法，swiper好像在6的时候就已经分离了分页器和一些其他工具
import { Autoplay, Navigation, Pagination, A11y } from 'swiper'
// 引入swiper样式，对应css 如果使用less或者css只需要把scss改为对应的即可
import 'swiper/css/bundle'
// setup语法糖只需要这样创建一个变量就可以正常使用分页器和对应功能，如果没有这个数组则无法使用对应功能
import { stringify } from 'qs'

import { post, get } from '../utils/request'
import { dalImg } from '../utils/tools'
import axios from 'axios'
import { setToken, getToken } from '../utils/tools'
import useApp from '../global/app' //引入全局状态数据
const appData = useApp() //使用
const city = appData.selectedcity
const Token = appData.Token
console.log(Token, 1111111111)
const modules = [Autoplay, Pagination, Navigation, A11y]
const searchvalue = ref('')
const list = ref([]) // 轮播图
const products = ref([]) // 商品列表
const sort = ref([]) // 分类
const router = useRouter()
const route = useRoute()
const showmore = ref(false)
//获取taken值
const a = getToken()
console.log(a, '这是token值')
const active = ref(0)
//搜索内容
const search = () => {
  // axios
  //   .get(`http://47.104.75.203:8080/api/shop/query?name=${na}`, {
  //     headers: {
  //       Authorization:
  //         'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhY2NvdXQiOiIxODUzNzE1MjU2MyIsImV4cCI6MTcyNTI3NzI3NiwiaWF0IjoxNjY1Mjc3Mjc2fQ.u8CY_4c7A2u_9yJe4USbvOGTssk01jjqjTtOv5bfIAE'
  //     }
  //   })
  axios({
    method: 'get',
    url: 'http://47.104.75.203:8080/api/shop/query',
    // data: {no
    //   name: '海底捞'
    // },
    // query: {no
    //   name: '海底捞'
    // },
    params: {
      name: searchvalue.value
    },
    headers: {
      Authorization: a
    }
  }).then((res) => {
    console.log(res)
    console.log('mohucahcun')
    products.value = res.data.data
  })
}
//获取店铺分类
axios
  .get('http://47.104.75.203:8080/api/shopclass/list', {
    headers: {
      Authorization: a
    }
  })
  .then((res) => {
    console.log(res.data.data)
    console.log('这是店铺分类')
    sort.value = res.data.data.records
  })

//商品初始化
axios
  .get('http://47.104.75.203:8080/api/shop/1', {
    id: 1,
    headers: {
      Authorization: a
    }
  })
  .then((res) => {
    console.log(res)
    console.log('这是通过id获取店铺')
    products.value = res.data.data
  })

// 加载更多
const page = ref(1)
const loading = ref(false) // 当loading为true的时候，触底之后会触发load事件
const finished = ref(false)
const pages = ref(1)
const tid = ref(route.query.tid) //获取传入的地址中的分类id
const loadDataFromServer = () => {
  loading.value = true // 开始加载数据
  const Toast1 = Toast.loading({
    message: '加载中...',
    forbidClick: true
  })
  axios
    .get(`http://47.104.75.203:8080/api/shop/${active.value}`, {
      headers: {
        Authorization: a
      }
    })
    .then((res) => {
      console.log('打印一下page.value 和 tid.value')
      console.log(page.value, tid.value)
      products.value.push(...res.data.data)
      loading.value = false // 加载完成
      Toast1.clear()
      pages.value = 2 // 设置总页数
      page.value += 1
    })
}
const loadData = () => {
  // 当前页大于总页数的话，表示加载完成
  if (pages.value < page.value) {
    finished.value = true
    return
  }
  loadDataFromServer()
}
// 路由切换，但是组件被复用的时候使用
onBeforeRouteUpdate((to, from) => {
  tid.value = to.query.tid // 在路由跳转的时候修改tid的值
  pages.value = 1 // 切换之后重置数据
  page.value = 1
  finished.value = false
  products.value = []
  loadDataFromServer()
})
</script>
<style scoped>
#swiperdiv {
  overflow: hidden;

  border-radius: 20px;
}
#swiperdiv img {
  border-radius: 20px;
  width: 100%;
  height: 220px;
}
#tabs1 {
  color: #ba1313 !important;
  font-size: 28px;
  padding: 5px 10px;
  overflow: hidden;
}

.top1 {
  z-index: 999;
  position: fixed;
  height: 40px;
  width: 98%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
#q0 {
  overflow: auto;
  padding: 0 5px;
}
.saoyisao {
  font-size: 20px;
  width: 100px;
  height: 60px;
  line-height: 30px;
  background-color: rgba(248, 248, 241, 0.345);
  box-shadow: 0 5px 8px gray;
  position: absolute;
  right: 0;
  top: 40px;
}
.saoyisao icon {
  display: inline-block;
  width: 96px;
}
.search1 {
  flex: 1;
  position: relative;
}
.search1 input {
  padding: 0 10px;
  height: 30px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(21, 19, 19, 0.475);
  border: none;
  overflow: hidden;
}
.ss {
  cursor: pointer;
  font-size: 20px;
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  line-height: 30px;
  border-radius: 10px;

  background-color: rgb(18, 90, 245);
}
.position {
  width: 5rem;
}
#swiperppp {
  padding-top: 45px;
}
.message {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.message .left {
  float: left;
}
.message .right {
  float: right;
}
.more1 {
  font-size: 25px;
  width: 3rem;
}
.item {
  width: 45vw;
  padding: 5px 10px;
  margin: 1vw;
  background-color: azure;
}
.item img {
  width: 100%;
  border-radius: 20px;
}
/* huodong */
.huodong {
  overflow: hidden;
  padding: 0.5rem 0;
  margin: 0 auto;
  text-align: center;
  width: 98%;
  height: 200px;
  border-radius: 15px;
  background-color: gray;
}
.huodong .q1 {
  width: 95%;
  border-radius: 15px;
  height: 80px;
  margin: 5px auto;
}
.huodong .q1 img {
  width: 100%;
  height: 100%;
}
.q2 img {
  display: inline-block;
  margin: 5px 1vw;
  width: 45%;
  height: 80px;
}
</style>
